import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入相应的页面
import Singer from '@/views/Singer'
import Song from '@/views/Song'
import Artist from '@/views/Artist'
import Detail from '@/views/Detail'
import NotFound from '@/views/NotFound'

// 创建路由对象（可以设置路由规则）
const router = new VueRouter({
  // ctrl + i 就会有属性名提示
  mode: 'history',
  // routes对应的是路由规则数组
  routes: [
    {
      path: '/singer',
      component: Singer
    },
    {
      path: '/song',
      component: Song
    },
    // {
    //   path: '/',
    //   component: Singer
    // }
    // 重定向解决 / 没有匹配到任何组件的问题
    {
      path: '/',
      redirect: '/singer'
    },
    {
      path: '/artist',
      component: Artist
    },
    {
      // 动态路径参数：https://v3.router.vuejs.org/zh/guide/essentials/dynamic-matching.html
      path: '/detail/:id/:name',
      component: Detail
    },
    // 404 要写在最后
    {
      path: '*',
      component: NotFound
    }
  ]
})

export default router
